/* eslint-disable vue/no-v-model-argument */
<template>
    <div class="site-import">
        <!-- 搜索 -->
        <div class="search-container">
            <div class="form-content">
                <el-form :inline="true" :model="filterForm" class="demo-form-inline">
                    <el-form-item label="文件名称">
                        <el-input maxlength="200" clearable v-model="filterForm.fileName" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="操作人">
                        <el-input maxlength="200" clearable v-model="filterForm.createByName" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="filterForm.status" placeholder="请选择" clearable>
                            <el-option
                                v-for="(item) in statusArr" :key="item.code"
                                :label="item.name" 
                                :value="item.code" 
                             />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作时间">
                        <!-- <el-date-picker
                            v-model="filterForm.time"
                            type="daterange"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :unlink-panels="false"
                        /> -->
                        <date-range ref="dateRef"/>
                    </el-form-item>
                </el-form>
            </div>
            <div class="search-btn">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="operate-btn">
            <el-button v-if="isInstitution" v-btn="'midrange:site:bathImport:import'" type="primary" @click="importModelFleg">导入{{isInstitution ? '组织' : '用户'}}</el-button>
            <el-button v-else type="primary" @click="importModelFleg">导入{{isInstitution ? '组织' : '用户'}}</el-button>
        </div>
        <!-- 表格 -->
        <div class="table-container">
            <!-- 列表 -->
            <table-wrap 
                v-if="tableData.length"
                hideHeader
                :total="total"
                :loading="loading"
                v-model:pageSize="filterForm.pageSize"
                v-model:pageIndex="filterForm.pageIndex"
                @request-list="getList"
                :table-data="tableData"
            >
                <el-table-column prop="name" fixed="left" label="序号" align="center" show-overflow-tooltip>
                    <template #default="scope">
                        <div>{{(filterForm.pageIndex - 1 ) * filterForm.pageSize + scope.$index + 1}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="fileName" label="文件名称" align="center" min-width="130" show-overflow-tooltip></el-table-column>
                <el-table-column prop="importitem" label="用户类型" align="center" min-width="130" show-overflow-tooltip>
                    <template #default="scope">
                        <div>{{formatUserType(scope.row.importitem)}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="导入文件" align="center">
                    <template #default="scope">
                        <div class="pointer">
                            <el-icon v-if="scope.row.uploadUrl" @click="download(scope.row.uploadUrl)"><Download /></el-icon>
                            <span v-else>暂无文件下载</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="导入结果提示文件" align="center" min-width="150">
                    <template #default="scope">
                        <div class="pointer">
                            <el-icon v-if="scope.row.failDownloadUrl" @click="download(scope.row.failDownloadUrl)"><Download /></el-icon>
                            <span v-else>暂无文件下载</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="failReason" label="失败原因" align="center" min-width="130" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="状态" align="center" min-width="130" show-overflow-tooltip>
                    <template #default="scope">
                        <div>
                            {{statusMap[scope.row.status]}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createByName" label="操作人" align="center" min-width="130" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作时间" align="center" min-width="160" show-overflow-tooltip>
                    <template #default="scope">
                        <div>
                            {{formatTime(scope.row.gmtCreate)}}
                        </div>
                    </template>
                </el-table-column>
            </table-wrap>
            <no-data v-else></no-data>
            <importModel
                ref="importModel" 
                :isInstitution="props.isInstitution"
                @on-refresh="getList"
             >

            </importModel>
        </div>
    </div>
</template>

<script >
import { defineComponent, toRefs, ref, reactive, toRef, computed, onMounted } from 'vue'
import tableWrap from '@/components/table-wrap/table-wrap.vue'
import noData from '@/components/no-data.vue'
import importModel from '../import-model.vue'
import { useStore } from 'vuex';
import { Download } from '@element-plus/icons-vue'
import { formatTimestamp } from '@/lib/tools'
import { useBtnAuth } from '@/hooks/useBtnAuth'
import DateRange from '@/components/date-range.vue';
import { switchCase } from '@babel/types';
const pageBtn = [
    'midrange:site:bathImport:import'
    ]
export default defineComponent({
    name: 'ImportList',
    components: {
        tableWrap,
        noData,
        importModel,
        Download,
        DateRange
    },
    props: {
        isInstitution: { // 是否是组织， true 组织 false 用户
            type: Boolean,
            default: true
        },
        id: {
            type: [Number, String],
            default: ''
        }
    },
    directives: {
        btn: {
            mounted(el, binding) {
                const {btnAuthMap} = useBtnAuth()
                el.style.display = btnAuthMap.value[binding.value] ? 'initial' : 'none'
            }
        }
    },
    setup(props) {
        const store = useStore()
        const formRef = ref(null)
        const importModel = ref(null)
        const dateRef = ref(null)
        // 状态数据
        const state = reactive({
            statusMap: ['生成结果', '导入中', '成功', '失败'],
            // 搜索条件数据
            filterForm: {
                pageIndex: 1,
                pageSize: 10,
                fileName: '',
                createByName: '',
                status: '',
                time: []
            },
            statusArr: [
                {
                    code: '2',
                    name: '成功'
                },
                {
                    code: '3',
                    name: '失败'
                }
            ],
            loading: false,
            // 表格数据
            tableData: [],
            total: 0
        })
        // 方法集合
        const fns = {
            formatUserType(type){
                const obj = {1: '教师', 2: '学生', 3: '组织'}
                return obj[type]
            },
            // 搜索
            search(){
                const { startTime, endTime } = dateRef.value.getDateRange()
                state.filterForm.beginGmtCreate = startTime && new Date(startTime).toUTCString()
                state.filterForm.endGmtCreate = endTime && new Date(endTime).toUTCString()
                state.filterForm.pageIndex = 1
                fns.getList()
            },
            // 重置
            reset(){
                for (const key in state.filterForm) {
                    state.filterForm[key] = ''
                }
                dateRef.value.resetDateRange()
                state.filterForm.pageIndex = 1
                state.filterForm.pageSize = 10
                fns.getList()
            },
            // 格式化时间戳
            formatTime(time){
                return formatTimestamp(time, 'YYYY-MM-DD HH:mm:ss')
            },
            // 下载
            download(url){
                window.open(url)
            },
            // 导入弹窗
            importModelFleg(){
                importModel.value.open()
            },
            // 获取列表
            getList () {
                state.loading = true
                store.dispatch('proxyAction', {
                    name: 'getImportVOList',
                    data: {
                        ...state.filterForm,
                        time: undefined,
                        institutionId: props.id,
                        importItem: props.isInstitution ? 3 : 1
                    }
                }).then((res) => {
                    state.tableData = res.data.rows || []
                    state.total = res.data.total;
                }).catch(err => {
                    store.dispatch('message', {
                        message: err.message || '操作失败'
                    });
                }).finally(() => {
                    state.loading = false;
                })
            }
        }
        onMounted(() => {
            fns.getList()
        })
        return{
            ...toRefs(state),
            ...fns,
            formRef,
            importModel,
            props,
            dateRef
        }
    }
})

</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .site-import{
        padding: 20px;
    }
    .search-container{
        width:100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .form-content{
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            flex: 1;
        }
    }
    .table-container{
        .btns{
            margin-bottom: 10px;
        }
    }
    .pointer{
        cursor: pointer;
    }
 
</style>
